<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手写mvvm</title>
</head>
<body>
    <div id="app">
        <div>
            <div>
                <span v-text="tag.name"></span>
                <input type="text" v-model="jack.name">
            </div>
            <div>
                <span v-text="tag.age"></span>
                <input type="text" v-model="jack.age">
            </div>
            <div>
                <span v-text="tag.father"></span>
                <input type="text" v-model="jack.father.name">
            </div>
            <div>
                <span v-text="tag.mom"></span>
                <input type="text" v-model="jack.mother.name">
            </div>
        </div>
        <h5>姓名: {{jack.name}} 年龄: {{jack.age}} 父亲: {{jack.father.name}} 母亲: {{jack.mother.name}}</h5>
    </div>
</body>
<script src="./Dep.js"></script>
<script src="./watcher.js"></script>
<script src="./compile.js"></script>
<script src="./observer.js"></script>
<script src="./MVVM.JS"></script>
<script>
    let vm = new MVVM({
        el: '#app',
        data: {
            tag:{
                name:   "姓名 : " ,
                age:    "年龄 : " ,
                father: "父亲 : " ,
                mom:    "母亲 : "
            },
            jack: {
                name: 'jack',
                age: 22,
                father: {name: 'tony'},
                mother: {name: 'lily'}
            }
        }
    })
    console.log(vm)
</script>
</html>